<template>
  <div class="yh_xinxi">
    <!-- 头部 -->
    <div class="top">
      <router-link to="" @click.native="fanHui()">&lt;</router-link>
      <div class="top_title">用户信息</div>
    </div>
    <div class="add_xinxi">
      <ul>
        <li>
          <span>我的头像</span>
          <input type="file" name="tou_xiang"
          @change="touXiang($event)"  />
          <div>
            <img :src="img" alt="" />
            <span>></span>
          </div>
        </li>
        <li>
          <span>昵称</span>
          <div>
            <input type="text" name="iphone" value="18779949182" />
            <span>></span>
          </div>
        </li>
        <li>
          <span>性别</span>
          <div>
            <select name="xin_bie" id="sex">
              <option value="1">男</option>
              <option value="0">女</option>
            </select>
            <span>></span>
          </div>
        </li>
        <li>
          <span>修改密码</span>
          <div>
            <router-link to="/Xiugai">></router-link>
          </div>
        </li>
      </ul>
    </div>

    <div class="bao_cun">
      <ul>
        <li>
          <router-link to="" @click.native="baoCun()">保存</router-link>
        </li>
        <li>
          <router-link to="/Login" @click.native="del()">退出登录</router-link>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
export default {
  data(){
    return {
      img:'./picture/grxx/01.jpg',
    }
  },
  methods:{
    touXiang(ev){
      this.img=ev.target.files.name
      console.log(ev.target.files);
    },
    fanHui(){
      window.history.go(-1)
    },
    baoCun(){
    },
    del(){
      this.$axios.get('http://47.114.130.21:3000/cart',{
      params:{
        id:localStorage.getItem('id'),
        store:{
          arr:this.$store.state.arr,
          arr1:this.$store.state.arr1,
          shouCang:this.$store.state.shouCang,
        }
      }
    }).then((data)=>{
      if(data.data.code==200){
        localStorage.removeItem("store");
        localStorage.removeItem('id');
      }
    })
    }
  }
};
</script>

<style lang="less" scoped>
.add_xinxi {
  padding: 0px 0.133333rem;
  background: #ffffff;
  margin-top: 45px;
  > ul {
    display: flex;
    flex-flow: column;
    > li {
      width: 100%;
      border-bottom: 1px solid #eeeeee;
      padding: 0.4rem 0.266667rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      > span {
        display: block;
        width: 25%;
        font-size: 15px;
        color: #666666;
      }
      > input {
        width: 100%;
        opacity: 0;
        z-index: 5;
        position: absolute;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
      }
      > div {
        width: 75%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        #sex {
          padding-left: 0.533333rem;
          width: 1.866667rem;
          border: none;
          color: #9f9999;
          font-size: 14px;
          // outline-color: #aaaaaa;
          outline: none;
          border-radius: 4px;
        }
        > input {
          padding: 4px 8px;
          text-align: right;
          color: #9f9999;
          border: none;
          outline-color: #aaaaaa;
          font-size: 14px;
          border-radius: 4px;
        }
        > img {
          width: 1.066667rem;
          height: 1.066667rem;
          border-radius: 50%;
          border: 1px solid #eeeeee;
        }
        > :last-child {
          font-family: cursive;
          font-size: 20px;
          color: #9f9999;
          margin-left: 0.666667rem;
        }
        > span {
          font-size: 16px;
          color: #9f9999;
        }
        > a {
          text-align: right;
          display: block;
          width: 70%;
          height: 100%;
        }
      }
    }
  }
}
.bao_cun {
  padding: 0.133333rem 0.533333rem;
  background: #eeeeee;
  > ul {
    > li {
      border-radius: 4px;
      margin: 0.266667rem 0px;
      > a {
        border-radius: 3px;
        text-align: center;
        width: 100%;
        height: 0.933333rem;
        line-height: 0.933333rem;
        display: block;
        font-size: 14px;
      }
    }
    > :first-child {
      > a {
        background: #000000;
        color: #fff;
      }
    }
    > :last-child {
      > a {
        background: #ffffff;
        color: #000;
      }
    }
  }
}
</style>